﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <title>秘盒幻想曲</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Styles -->
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
        <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Raleway:400,700,300' rel='stylesheet' type='text/css'>
        <link href="fonts/Stroke-Gap-Icons-Webfont/style.css" rel="stylesheet" type="text/css" />

        <!-- components -->
        <link href="vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="vendor/owl-carousel/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css" /> 
        <link href="vendor/slider-pro/dist/css/slider-pro.min.css" rel="stylesheet" type="text/css" /> 
        <link href="vendor/slick-carousel/slick/slick.css" rel="stylesheet" type="text/css" /> 
        <link href="vendor/animate.css/animate.min.css" rel="stylesheet" type="text/css" /> 
        <link href="vendor/fancybox/source/jquery.fancybox.css" rel="stylesheet" type="text/css" /> 

        <link href="css/main.css" rel="stylesheet" type="text/css" />

    </head>
    <body data-scrolling-animations="true">

        <div id="page-preloader"><span class="spinner"></span></div>

        <!-- ========================== -->
        <!-- Navigation -->
        <!-- ========================== -->
        <header class="header scrolling-header">
            <nav id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container relative-nav-container">
                    <a class="toggle-button visible-xs-block" data-toggle="collapse" data-target="#navbar-collapse">
                        <i class="fa fa-navicon"></i>
                    </a>
                    <a class="navbar-brand scroll" href="index.html">
                        <img class="normal-logo hidden-xs" src="img/logo.png" alt="logo" />
                        <img class="scroll-logo hidden-xs" src="img/logo-dark.png" alt="logo" />
                        <img class="scroll-logo visible-xs-block" src="img/logo-free.png" alt="logo" />
                    </a>
                    <ul class="nav navbar-nav navbar-right nav-icons wrap-user-control">
                        <li>
                            <a id="search-open" href="#fakelink"><i class="fa fa-search"></i></a>
                        </li>
                        <li class="open-signup">
                            <a href="#fakelink"><i class="fa fa-user"></i></a>
                        </li>
                    </ul>
                    <div class="navbar-collapse collapse floated" id="navbar-collapse">
                        <ul class="nav navbar-nav navbar-with-inside clearfix navbar-right with-border"> 
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="services.html">Services</a></li>
                            <li><a href="contact.html">Contacts</a></li>
                        </ul>
                    </div>
                </div>
                <div class="navbar-search ">
                    <div class="container">
                        <form>
                            <div class="input-group">
                                <input type="text" placeholder="Type your search..." class="form-control" autocomplete="off">
                                <span class="input-group-btn">
                                    <button type="reset" class="btn search-close" id="search-close">
                                        <i class="fa fa-close"></i>
                                    </button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </nav>
        </header><!--./navigation -->

        <!-- ========================== -->
        <!-- HOME - HEADER -->
        <!-- ========================== -->
        <section class="top-header home-header with-bottom-effect transparent-effect dark">
            <div class="bottom-effect"></div>
            <div class="header-container">	
                <div class="wrap-section-slider" id="topSlider">
                    <div class="sp-slides">
                        <div class="slide-item sp-slide">
                            <div class="slide-image">
                                <img src="img/sections/home-top-background.jpg"  alt="" />
                            </div>
                            <!-- <div class="slide-content ">
                                <p class="top-title sp-layer"  data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="100" >we are oscend</p>
                                <div class="title sp-layer" data-show-transition="right" data-hide-transition="up" data-show-delay="500" data-hide-delay="150">flexible & universal</div>
                                <div class="under-title sp-layer" data-show-transition="up" data-hide-transition="up" data-show-delay="600" data-hide-delay="200">for all your business needs</div>
                                <div class="controls sp-layer" data-show-transition="up" data-hide-transition="up" data-show-delay="800" data-hide-delay="250">
                                    <a href="#" class="btn btn-primary">Get Started NOW</a>
                                    <a href="#" class="btn btn-info">&nbsp;&nbsp;Discover More&nbsp;&nbsp;</a>
                                </div>
                            </div> -->
                        </div>
                        <div class="slide-item sp-slide">
                            <div class="slide-image">
                                <img src="img/sections/section-11.jpg" alt="" />
                            </div>
                            <!-- <div class="slide-content sp-layer">
                                <p class="top-title sp-layer"  data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="100" >we are oscend</p>
                                <div class="title sp-layer" data-show-transition="right" data-hide-transition="up" data-show-delay="500" data-hide-delay="150">flexible & universal</div>
                                <div class="under-title sp-layer" data-show-transition="up" data-hide-transition="up" data-show-delay="600" data-hide-delay="200">for all your business needs</div>
                                <div class="controls sp-layer" data-show-transition="up" data-hide-transition="up" data-show-delay="800" data-hide-delay="250">
                                    <a href="#" class="btn btn-primary">Get Started NOW</a>
                                    <a href="#" class="btn btn-info">&nbsp;&nbsp;Discover More&nbsp;&nbsp;</a>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div><!--./container-->
        </section>  


        <!-- ========================== -->
        <!-- HOME - FEATURES -->
        <!-- ========================== -->
        <section class="features-section">
            <div class="container">
                <div class="section-heading " >
                    <div class="section-title">our benefits</div>
                    <div class="section-subtitle">Lorem ipsum dolor sit amet consectetur elit</div>
                    <div class="design-arrow"></div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-6 wow fadeIn">
                        <article>
                            <div class="feature-item ">
                                <div class="wrap-feature-icon">
                                    <div class="feature-icon">
                                        <span class="icon icon-Carioca"></span>
                                    </div>
                                </div>
                                <div class="title">Clean &amp; modern</div>
                                <div class="text">
                                    Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit sed don eiusmod tempor enim
                                    minim veniam quis notrud exercitation
                                </div>
                            </div>
                        </article>
                    </div> 
                    <div class="col-md-3 col-sm-6 wow fadeIn">
                        <article>
                            <div class="feature-item active">
                                <div class="wrap-feature-icon">
                                    <div class="feature-icon">
                                        <span class="icon icon-Heart"></span>
                                    </div>
                                </div>
                                <div class="title">unique design</div>
                                <div class="text">
                                    Amco laboris nisi ut aliquip xea commodo
                                    consequat. Duis aute irure dolor reprehenderit
                                    voluptate velit esse cillum dolore fugiat
                                </div>
                            </div>
                        </article>
                    </div> 
                    <div class="col-md-3 col-sm-6 wow fadeIn">
                        <article>
                            <div class="feature-item">
                                <div class="wrap-feature-icon">
                                    <div class="feature-icon">
                                        <span class="icon  icon-Tools"></span>
                                    </div>
                                </div>
                                <div class="title">multipurpose</div>
                                <div class="text">
                                    Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit sed don eiusmod tempor enim
                                    minim veniam quis notrud exercitation
                                </div>
                            </div>
                        </article>
                    </div> 
                    <div class="col-md-3 col-sm-6 wow fadeIn">
                        <article>
                            <div class="feature-item">
                                <div class="wrap-feature-icon">
                                    <div class="feature-icon">
                                        <span class="icon icon-Blog"></span>
                                    </div>
                                </div>
                                <div class="title">100% responsive</div>
                                <div class="text">
                                    Amco laboris nisi ut aliquip xea commodo
                                    consequat. Duis aute irure dolor reprehenderit
                                    voluptate velit esse cillum dolore fugiat
                                </div>
                            </div>
                        </article>
                    </div> 
                </div>
            </div>
        </section>


        <!-- ========================== -->
        <!-- HOME - LAPTOPS -->
        <!-- ========================== -->
        <section class="laptops-section">
            <div class="container">
                <div class="laptops text-center wow fadeInUp" data-wow-duration="1s">
                    <img src="img/laptop.jpg" alt="" class="img-responsive" />
                </div>
            </div>
            <div class="container">
                <div class="content-logo text-center wow fadeInUp"  data-wow-duration="1s">
                    <img src="img/content-logo.png" alt="" class="img-responsive" />
                </div>
            </div>
        </section>

        <!-- ========================== -->
        <!-- HOME - AREAS OF EXPERTISE-->
        <!-- ========================== --> 
        <section class="areas-section with-icon with-top-effect">
            <div class="section-icon"><span class="icon icon-Umbrella"></span></div>
            <div class="container"> 
                <div class="row">
                    <div class="col-md-7 col-sm-7 text-right">
                        <div class="clearfix " style="padding-right: 3px;">
                            <div class="above-title">We think & deliver</div>
                            <h4>Areas of expertise</h4>
                        </div>
                        <div><em>Lorem ipsum dolor sit amet consectetur adipisicing elit</em></div>
                        <div class="design-arrow inline-arrow"></div>
                        <p class="large">Quis nostrud exercitation ullamco laboris nisi commodo consequat duis aute
                            sed ipsum airure dolor in reprehenderit in voluptate velit essl</p>
                        <p>Amco laboris nisi ut aliquip xea commodo consequat. Duis aute irure dolor reprehenderit voluptate
                            velit esse cillum dolore fugiat Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud sed ipsum dui
                            suit exercitation ullamco laboris nisi Lorem ipsum dolor sit amet consectetur.</p>
                    </div>
                    <div class="col-md-5 col-sm-5 text-center">
                        <img src="img/areas.png" alt="" class="img-responsive" />
                    </div>
                </div>
            </div>
        </section>

        <!-- ========================== -->
        <!-- HOME - ACHIEVEMENTS -->
        <!-- ========================== -->
        <section class="achievements-section with-bottom-effect dark dark-strong">
            <div class="bottom-effect"></div>
            <div class="container dark-content">
                <div class="row list-achieve">
                    <div class="col-md-3 col-sm-3 col-xs-6 wow zoomIn" data-wow-delay="0.5s">
                        <article>
                            <div class="achieve-item">
                                <div class="achieve-icon">
                                    <span class="icon icon-Wallet"></span>
                                </div>
                                <div class="count">561</div>
                                <div class="name">projects delivered</div>
                            </div>
                        </article>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6 wow zoomIn" data-wow-delay="1.5s">
                        <article>
                            <div class="achieve-item">
                                <div class="achieve-icon">
                                    <span class="icon icon-Cup"></span>
                                </div>
                                <div class="count">24</div>
                                <div class="name">awards won</div>
                            </div>
                        </article>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6 wow zoomIn" data-wow-delay="2.5s">
                        <article>
                            <div class="achieve-item">
                                <div class="achieve-icon">
                                    <span class="icon icon-Like"></span>
                                </div>
                                <div class="count">160</div>
                                <div class="name">happy clients</div>
                            </div>
                        </article>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6 wow zoomIn" data-wow-delay="3.5s">
                        <article>
                            <div class="achieve-item">
                                <div class="achieve-icon">
                                    <span class="icon icon-Users"></span>
                                </div>
                                <div class="count">285</div>
                                <div class="name">employees working</div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </section>

        <!-- ========================== -->
        <!-- HOME - LATEST WORKS -->
        <!-- ========================== -->
        <section class="latest-works-section clearfix">
            <div class="container">
                <div class="section-heading">
                    <div class="section-title">Latest Works</div>
                    <div class="section-subtitle">Lorem ipsum dolor amet consectetur adipisic elit</div>
                    <div class="design-arrow"></div>
                </div>
            </div>

            <div class="scroll-pane ">
                <div class="scroll-content">
                    <div class="scroll-content-item  ">
                        <a href="img/img3.jpg" class="fancybox">
                            <img src="img/img3.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img4.jpg" class="fancybox">
                            <img src="img/img4.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img1.jpg" class="fancybox">
                            <img src="img/img1.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img2.jpg" class="fancybox">
                            <img src="img/img2.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img3.jpg" class="fancybox">
                            <img src="img/img3.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img3.jpg" class="fancybox">
                            <img src="img/img3.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img4.jpg" class="fancybox">
                            <img src="img/img4.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img1.jpg" class="fancybox">
                            <img src="img/img1.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img2.jpg" class="fancybox">
                            <img src="img/img2.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img3.jpg" class="fancybox">
                            <img src="img/img3.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img3.jpg" class="fancybox">
                            <img src="img/img3.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img4.jpg" class="fancybox">
                            <img src="img/img4.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img1.jpg" class="fancybox">
                            <img src="img/img1.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img2.jpg" class="fancybox">
                            <img src="img/img2.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                    <div class="scroll-content-item  ">
                        <a href="img/img3.jpg" class="fancybox">
                            <img src="img/img3.jpg" alt="" />
                        </a>
                        <div class="name">dahls 160</div> 
                    </div>
                </div>
                <div class="scroll-bar-wrap ">
                    <div class="scroll-bar"></div>
                </div>
            </div>
        </section>


        <!-- ========================== -->
        <!-- HOME - STEPS  -->
        <!-- ========================== -->
        <section class="steps-section with-icon ">
            <div class="section-icon"><span class="icon icon-Umbrella"></span></div>
            <div class="container">
                <div class="section-heading">
                    <div class="section-title">simple steps . quick results</div>
                    <div class="section-subtitle">Lorem ipsum dolor sit amet consectetur elit</div>
                    <div class="design-arrow"></div>
                </div>
            </div>
            <div class="container">
                <div class="row steps-list">
                    <div class="col-md-4 col-sm-4 col-xs-4 wow fadeIn" >
                        <div class="step-item">
                            <div class="item-icon" data-count="1">
                                <span class="icon icon-Pencil"></span>
                            </div>
                            <div class="item-text">
                                <h5>We Plan &amp; <br />
                                    Sketch .
                                </h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4 wow fadeIn" data-wow-delay="0.3s">
                        <div class="step-item invert">
                            <div class="item-icon" data-count="2">
                                <span class="icon icon-Glasses"></span>
                            </div>
                            <div class="item-text">
                                <h5>We Design &amp; <br />
                                    Develop .
                                </h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4 wow fadeIn" data-wow-delay="0.6s">
                        <div class="step-item">
                            <div class="item-icon" data-count="3">
                                <span class="icon icon-Plaine"></span>
                            </div>
                            <div class="item-text">
                                <h5>We Test &amp; <br />
                                    Deliver .
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container results-container">
                <div class="row">
                    <div class="col-md-6  col-sm-6">
                        <ul class="skills">
                            <li data-percent="75" class="skills-animated ">
                                <span>web design</span>
                                <div class="progress" >
                                    <div class="progress-percent">
                                        <span class="progress-bar-tooltip">75</span>%
                                    </div>
                                </div>
                            </li>
                            <li data-percent="90" class="skills-animated orange">
                                <span>programming</span>
                                <div class="progress" >
                                    <div class="progress-percent">
                                        <span class="progress-bar-tooltip">90</span>%
                                    </div>
                                </div>
                            </li>
                            <li data-percent="55" class="skills-animated">
                                <span>marketing</span>
                                <div class="progress" >
                                    <div class="progress-percent">
                                        <span class="progress-bar-tooltip">55</span>%
                                    </div>
                                </div>
                            </li>
                            <li data-percent="85" class="skills-animated orange">
                                <span>photography</span> 
                                <div class="progress">
                                    <div class="progress-percent">
                                        <span class="progress-bar-tooltip">85</span>%
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="results-description" >
                            <h5 class="italic-title">Every customer is importany to us!</h5>
                            <h4>Our Experienced guys at Oscend always giving their best
                                to make the clients happy!!
                            </h4>
                            <p>Amco laboris nisi ut aliquip xea commodo consequt. Duis aute irure dolor reprehenderit voluptate velit esse cillum dolore
                                fugiat lore ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna
                                aliqua ut enim ad mid veniam quis nostrud exercitation ullamco laboris nisid. Lorem ipsum dolor sit amet consectetur adip
                                isicing elit sed eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ========================== -->
        <!-- HOME - BROWSERS  -->
        <!-- ========================== -->
        <section class="browsers-section with-bottom-effect ">
            <div class="bottom-effect"></div>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <img src="img/browsers-image.png" alt=" " class="img-responsive" />
                    </div>
                </div>
            </div>
        </section>

        <!-- ========================== -->
        <!-- HOME - SERVICES  -->
        <!-- ========================== -->
        <section class="services-section ">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div class="service-item">
                            <div class="media-left">
                                <div class="wrap-service-icon">
                                    <div class="service-icon">
                                        <span class="icon icon-Flag"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="media-body">
                                <h5>awesome icons</h5>
                                <p><em>best solutions that works</em></p>
                                <p>Lorem ipsum dolor sit amet consect letur se
                                    adipisicing elit sed don eiusmod.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div class="service-item">
                            <div class="media-left">
                                <div class="wrap-service-icon">
                                    <div class="service-icon">
                                        <span class="icon icon-Carioca"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="media-body">
                                <h5>Clean & modern</h5>
                                <p><em>lorem ipsum dolor sit amet</em></p>
                                <p>Lorem ipsum dolor sit amet consect letur se
                                    adipisicing elit sed don eiusmod.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div class="service-item">
                            <div class="media-left">
                                <div class="wrap-service-icon">
                                    <div class="service-icon">
                                        <span class="icon icon-Planet"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="media-body">
                                <h5>multipurpose</h5>
                                <p><em>providing excellent services</em></p>
                                <p>Lorem ipsum dolor sit amet consect letur se
                                    adipisicing elit sed don eiusmod.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="services-divider">
                        <div class="col-md-4 col-sm-4 col-xs-4"></div>
                        <div class="col-md-4 col-sm-4 col-xs-4"></div>
                        <div class="col-md-4 col-sm-4 col-xs-4"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div class="service-item">
                            <div class="media-left">
                                <div class="wrap-service-icon">
                                    <div class="service-icon">
                                        <span class="icon icon-Folder"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="media-body">
                                <h5>well documented</h5>
                                <p><em>providing excellent services</em></p>
                                <p>Lorem ipsum dolor sit amet consect letur se
                                    adipisicing elit sed don eiusmod.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div class="service-item">
                            <div class="media-left">
                                <div class="wrap-service-icon">
                                    <div class="service-icon">
                                        <span class="icon icon-Layers"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="media-body">
                                <h5>multiple colors</h5>
                                <p><em>best solutions that works</em></p>
                                <p>Lorem ipsum dolor sit amet consect letur se
                                    adipisicing elit sed don eiusmod.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div class="service-item">
                            <div class="media-left">
                                <div class="wrap-service-icon">
                                    <div class="service-icon">
                                        <span class="icon icon-DesktopMonitor"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="media-body">
                                <h5>responsive design</h5>
                                <p><em>lorem ipsum dolor sit amet</em></p>
                                <p>Lorem ipsum dolor sit amet consect letur se
                                    adipisicing elit sed don eiusmod.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ========================== -->
        <!-- HOME - VIDEO SECTION -->
        <!-- ========================== -->

        <section class="video-section with-bottom-effect dark dark-strong">
            <!--<div class="video-play" id="video-play" data-property="{videoURL:'',containment:'#video-play',autoPlay:true, mute:true, startAt:0, opacity:1}"></div>-->
            <div class="bottom-effect"></div>
            <div class="container dark-content">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div class="title">Watch our Intro Video</div>
                        <em>Lorem ipsum dolor sit amet consectetur elit</em>
                        <a href="&amp;autoplay=1" class="btn-play fancybox-video"></a>
                        <div class="duration">Duration : <span>4:35</span></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ========================== -->
        <!-- HOME - TEAM -->
        <!-- ========================== -->
        <section class="team-section with-bottom-effect">
            <div class="bottom-effect"></div>
            <div class="container">
                <div class="section-heading wow fadeIn">
                    <div class="section-title">experienced team</div>
                    <div class="section-subtitle">Lorem ipsum dolor amet consectetur adipisic elit</div>
                    <div class="design-arrow"></div>
                </div>
            </div>
            <div class="container">
                <div class="wrap-team-slider wow fadeIn"> 
                    <div class="prev-btn"><span class="icon invertX icon-Goto"></span></div>
                    <div class="next-btn"><span class="icon icon-Goto"></span></div>
                    <div class="team-slider enable-stick-slider" data-slick='{"slidesToShow": 3, "slidesToScroll": 1, "prevArrow" : ".prev-btn", "nextArrow": ".next-btn" }'>
                        <div class="slide-item">
                            <div class="image">
                                <img src="img/team/member-1.png" alt="" />
                            </div>
                            <div class="slide-description">
                                <div class="member-info">
                                    <div class="name">dan tarkist</div>
                                    <div class="position">Creative Director</div>
                                </div>
                                <div class="contacts">
                                    <ul>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="slide-item">
                            <div class="image">
                                <img src="img/team/member-3.png" alt="" />
                            </div>
                            <div class="slide-description">
                                <div class="member-info">
                                    <div class="name">sarina ken</div>
                                    <div class="position">Creative Director</div>
                                </div>
                                <div class="contacts">
                                    <ul>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="slide-item">
                            <div class="image">
                                <img src="img/team/member-2.png" alt="" />
                            </div>
                            <div class="slide-description">
                                <div class="member-info">
                                    <div class="name">ana mes</div>
                                    <div class="position">Product Manager</div>
                                </div>
                                <div class="contacts">
                                    <ul>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div> 
                        <div class="slide-item">
                            <div class="image">
                                <img src="img/team/member-1.png" alt="" />
                            </div>
                            <div class="slide-description">
                                <div class="member-info">
                                    <div class="name">dan tarkist</div>
                                    <div class="position">Creative Director</div>
                                </div>
                                <div class="contacts">
                                    <ul>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="slide-item">
                            <div class="image">
                                <img src="img/team/member-3.png" alt="" />
                            </div>
                            <div class="slide-description">
                                <div class="member-info">
                                    <div class="name">sarina ken</div>
                                    <div class="position">Creative Director</div>
                                </div>
                                <div class="contacts">
                                    <ul>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </section>

        <!-- ========================== -->
        <!-- REVIEWS SECTION -->
        <!-- ========================== -->
        <section class="reviews-section">
            <div class="container">
                <div class="section-heading">
                    <div class="section-title">What clients said</div>
                    <div class="section-subtitle">Lorem ipsum dolor amet consectetur adipisic elit</div>
                    <div class="design-arrow"></div>
                </div>
            </div>
            <div class="container">
                <div class="reviews-slider enable-owl-carousel" data-single-item="true">
                    <div class="slide-item">
                        <div class="media-left">
                            <div class="image-block">
                                <img src="img/review-img1.jpg" alt="" />
                            </div>
                        </div>
                        <div class="media-body">
                            <div class="description-block">
                                <div class="name">
                                    <span>James H. ken </span>
                                    <em>Oscend Creative Inc.</em>
                                </div>
                                <div class="review">
                                    <em>Lorem ipsum dolor sit amet consecteur adipiscing elit sed eiusmod tempor ncididue labore 
                                        etor dolore magna aliqua. Ut enim ad minim veniam qu nostrud exercitat ullamco laboris
                                        nisi ut aliquip ex ea commodo consequat duis autes irure dolor rep.</em>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="slide-item">
                        <div class="media-left">
                            <div class="image-block">
                                <img src="img/review-img1.jpg" alt="" />
                            </div>
                        </div>
                        <div class="media-body">
                            <div class="description-block">
                                <div class="name">
                                    <span>James H. ken </span>
                                    <em>Oscend Creative Inc.</em>
                                </div>
                                <div class="review">
                                    <em>Lorem ipsum dolor sit amet consecteur adipiscing elit sed eiusmod tempor ncididue labore 
                                        etor dolore magna aliqua. Ut enim ad minim veniam qu nostrud exercitat ullamco laboris
                                        nisi ut aliquip ex ea commodo consequat duis autes irure dolor rep.</em>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </section>


        <!-- ========================== -->
        <!-- BUY SECTION -->
        <!-- ========================== -->
        <section class="buy-section with-icon">
            <div class="section-icon"><span class="icon icon-Umbrella"></span></div>
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-1 col-sm-9 wow fadeInLeft">
                        <div class="section-text">
                            <div class=" vcenter like">
                                <span class="icon icon-Briefcase"></span> 
                            </div>
                            <div class="buy-text vcenter">
                                <div class="top-text">Best & affordable web applications</div>
                                <div class="bottom-text">Discuss your project with us</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 wow fadeInRight">
                        <a href="#" class="btn btn-info ">Get Started NOW</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- ========================== -->
        <!-- HOME - PRICE -->
        <!-- ========================== -->
        <section class="price-section">
            <div class="with-bottom-effect dark dark-strong pricing-background">
                <div class="bottom-effect"></div>
            </div>
            <div class="dark-content">
                <div class="container">
                    <div class="section-heading">
                        <div class="section-title">our pricing plans</div>
                        <div class="section-subtitle">Lorem ipsum dolor amet consectetur adipisic elit</div>
                        <div class="design-arrow"></div>
                    </div>
                </div>
            </div>
            <div class="dark-content">
                <div class="container">
                    <div class="row no-gutter plans-list text-center">
                        <div class="col-md-4 col-sm-4 vcenter">
                            <div class="plan-item wow zoomIn"  data-wow-delay="0.3s">
                                <div class="item-heading">
                                    <span class="name">basic</span>
                                    <div class="count">$125</div>
                                    <em>per month</em>
                                </div>
                                <div class="item-body">
                                    <ul class="list-features">
                                        <li class="active">2 Hosting Accounts</li>
                                        <li class="active">10 FREE Users</li>
                                        <li class="active">600GB Monthly Bandwidth</li>
                                        <li>Complete Analytics</li>
                                        <li>Unlimited Databses</li>
                                    </ul>
                                </div>
                                <div class="item-footer text-center">
                                    <a href="#" class="btn btn-default">sign up now</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 vcenter">
                            <div class="plan-item wow zoomIn active" data-wow-delay="0.6s">
                                <div class="item-heading">
                                    <span class="name">popular</span>
                                    <div class="count">$175</div>
                                    <em>per month</em>
                                </div>
                                <div class="item-body">
                                    <ul class="list-features">
                                        <li class="active">8 Hosting Accounts </li>
                                        <li class="active">30 FREE Users</li>
                                        <li class="active">2 TB Monthly Bandwidth </li>
                                        <li class="active">Complete Analytics</li>
                                        <li>Unlimited Support</li>
                                    </ul>
                                </div>
                                <div class="item-footer text-center">
                                    <a href="#" class="btn btn-default">sign up now</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4  col-sm-4 vcenter">
                            <div class="plan-item wow zoomIn"  data-wow-delay="0.3s">
                                <div class="item-heading">
                                    <span class="name">premier</span>
                                    <div class="count">$250</div>
                                    <em>per month</em>
                                </div>
                                <div class="item-body">
                                    <ul class="list-features">
                                        <li class="active">25 Hosting Accounts </li>
                                        <li class="active">Unlimited FREE Users </li>
                                        <li class="active">8 TB Monthly Bandwidth </li>
                                        <li class="active">Complete Analytics</li>
                                        <li class="active">Unlimited Storage</li>
                                    </ul>
                                </div>
                                <div class="item-footer text-center">
                                    <a href="#" class="btn btn-default">sign up now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>



        <!-- ========================== -->
        <!-- HOME - LATEST NEWS -->
        <!-- ========================== -->
        <section class="latest-news-section with-icon with-top-effect clearfix">
            <div class="section-icon"><span class="icon icon-Umbrella"></span></div>
            <div class="container">
                <div class="section-heading">
                    <div class="section-title">latest news</div>
                    <div class="section-subtitle">Lorem ipsum dolor sit amet consectetur elit</div>
                    <div class="design-arrow"></div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-4 wow fadeInUp">
                        <div class="news-item">
                            <div class="meta">
                                <div class="meta-item"><span class="icon icon-Tag"></span>MOBile ui, creative</div>
                                <div class="meta-item"><span class="icon icon-Agenda"></span>26 SEP</div>
                            </div>
                            <div class="image">
                                <a href="#">
                                    <img src="img/news/image1.jpg" alt="" />
                                    <div class="image-content">
                                        <span class="read-more">read more</span>  
                                    </div>
                                </a> 
                            </div> 
                            <div class="user-avatar clearfix">
                                <div class="avatar">
                                    <img src="img/avatars/img1.png" alt="" /> 
                                </div>
                            </div>
                            <div class="news-body">
                                <h5>Lorem ipsum dolor amet consectetur</h5>
                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elitsed
                                    eiusmod tempor enim minim veniam quis notru exercit ation
                                    Lorem ipsum dolor sit amet.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 wow fadeInUp">
                        <div class="news-item">
                            <div class="meta">
                                <div class="meta-item"><span class="icon icon-Tag"></span>project</div>
                                <div class="meta-item"><span class="icon icon-Agenda"></span>20 SEP</div>
                            </div>
                            <div class="image">
                                <a href="#">
                                    <img src="img/news/image2.jpg" alt="" />
                                    <div class="image-content">
                                        <span class="read-more">read more</span>  
                                    </div>
                                </a> 
                            </div> 
                            <div class="user-avatar clearfix">
                                <div class="avatar">
                                    <img src="img/avatars/img2.png" alt="" /> 
                                </div>
                            </div>
                            <div class="news-body">
                                <h5>eiusmod tempor incididunt labore</h5>
                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elitsed
                                    eiusmod tempor enim minim veniam quis notru exercit ation
                                    Lorem ipsum dolor sit amet.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 wow fadeInUp">
                        <div class="news-item">
                            <div class="meta">
                                <div class="meta-item"><span class="icon icon-Tag"></span>photography, analysis</div>
                                <div class="meta-item"><span class="icon icon-Agenda"></span>28 SEP</div>
                            </div>
                            <div class="image">
                                <a href="#">
                                    <img src="img/news/image3.jpg" alt="" />
                                    <div class="image-content">
                                        <span class="read-more">read more</span>  
                                    </div>
                                </a> 
                            </div> 
                            <div class="user-avatar clearfix">
                                <div class="avatar">
                                    <img src="img/avatars/img1.png" alt="" /> 
                                </div>
                            </div>
                            <div class="news-body">
                                <h5>liua enim minim veniam quis nostrui</h5>
                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elitsed
                                    eiusmod tempor enim minim veniam quis notru exercit ation
                                    Lorem ipsum dolor sit amet.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- ========================== -->
        <!-- HOME - SLIDER -->
        <!-- ========================== -->
        <section class="slider-section dark dark-strong with-bottom-effect">
            <div class="bottom-effect"></div>
            <div class="dark-content">
                <div class="wrap-section-slider enable-owl-carousel" data-single-item="true" >
                    <div class="slide-item">
                        <div class="slider-title">latest from twitter <i class="fa fa-twitter"></i> oscend creative agency</div>
                        <p class="large">Lorem ipsum dolor sit amet consecteur adipiscing elit sed eiusmod tempor ncididue ut labore etor dolore magna aliqua. Ut enim <br />
                            minim veniam qua nostrud exercitat ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                        <div class="time">2 minutes ago</div>
                    </div>
                    <div class="slide-item">
                        <div class="slider-title">latest from twitter <i class="fa fa-twitter"></i> oscend creative agency</div>
                        <p class="large">Lorem ipsum dolor sit amet consecteur adipiscing elit sed eiusmod tempor ncididue ut labore etor dolore magna aliqua. Ut enim <br />
                            minim veniam qua nostrud exercitat ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                        <div class="time">6 minutes ago</div>
                    </div>
                    <div class="slide-item">
                        <div class="slider-title">latest from twitter <i class="fa fa-twitter"></i> oscend creative agency</div>
                        <p class="large">Lorem ipsum dolor sit amet consecteur adipiscing elit sed eiusmod tempor ncididue ut labore etor dolore magna aliqua. Ut enim <br />
                            minim veniam qua nostrud exercitat ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                        <div class="time">12 minutes ago</div>
                    </div>

                </div>
            </div>
        </section>


        <!-- ========================== -->
        <!-- HOME - CLIENTS -->
        <!-- ========================== -->
        <section class="clients-section clearfix">
            <div class="container">
                <div class="section-heading wow fadeInDown">
                    <div class="section-title">trusted clients</div>
                    <div class="section-subtitle">Lorem ipsum dolor sit amet consectetur elit</div>
                    <div class="design-arrow"></div>
                </div>
            </div>
            <div class="container">
                <div class="list-clients">
                    <div class="client-item wow fadeInLeft">
                        <img src="img/partners/partner-4.png" alt="" />
                    </div>
                    <div class="client-item wow fadeInLeft">
                        <img src="img/partners/partner-1.png" alt="" />
                    </div>
                    <div class="client-item wow fadeInRight">
                        <img src="img/partners/partner-3.png" alt="" />
                    </div> 
                    <div class="client-item wow fadeInRight">
                        <img src="img/partners/partner-2.png" alt="" />
                    </div>
                </div>
            </div>
        </section>

        <!-- ========================== -->
        <!-- FOOTER -->
        <!-- ========================== -->
        <footer>
            <!-- ========================== -->
            <!-- BUY SECTION -->
            <!-- ========================== -->
            <section class="buy-section with-icon">
                <div class="section-icon"><span class="icon icon-Umbrella"></span></div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-1 col-sm-9 wow fadeInLeft">
                            <div class="section-text">
                                <div class=" vcenter like">
                                    <span class="icon icon-Like"></span> 
                                </div>
                                <div class="buy-text vcenter">
                                    <div class="top-text">oscend - a creative & multipurpose template</div>
                                    <div class="bottom-text">Lorem ipsum dolor sit amet consectetur elit sed</div>
                                </div>
                            </div>
                        </div> 
                        <div class="col-md-3 col-sm-3  wow fadeInRight">
                            <a href="#" class="btn btn-info ">Buy it now</a>
                        </div>
                    </div>
                </div>
            </section>
            <!-- ========================== -->
            <!-- FOOTER - SOCIAL -->
            <!-- ========================== -->
            <section class="social-section dark dark-strong">
                <div class="container dark-content">
                    <div class="tt">We are social 24/7 - Get in touch</div>
                    <ul class="list-socials">
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                        <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
                    </ul>
                </div>
            </section>

            <!-- ========================== -->
            <!-- FOOTER - FOOTER -->
            <!-- ========================== -->
            <section class="footer-section">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-sm-3">
                            <h5>about us</h5>
                            <p>Lorem ipsum dolor sit amet consect etural
                                adipisicing elit sed don eiusmod temp enim
                                minim veniam quis notrud exercitation lore
                                ipsum dolor sit amet.</p>
                        </div>
                        <div class="col-md-3 col-sm-3">
                            <h5>Sitemap</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <ul class="footer-nav">
                                        <li><a href="#">About Us</a></li>
                                        <li><a href="#">Portfolio</a></li>
                                        <li class="active"><a href="#">Latest News</a></li>
                                        <li><a href="#">Contact us</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <ul class="footer-nav">
                                        <li><a href="#">Get Help</a></li>
                                        <li><a href="#">Careers</a></li>
                                        <li><a href="#">FAQ's</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3">
                            <h5>Contact info</h5>
                            <ul class="contacts-list">
                                <li>
                                    <p><i class="icon icon-House"></i>68 Landsriver Street, California  USA 22036</p>
                                </li>
                                <li>
                                    <p><i class="icon icon-Phone2"></i>0800 126 01268</p>
                                </li>
                                <li>
                                    <p><i class="icon icon-Mail"></i><a href="mailto:support@oscend.com">support@oscend.com</a> </p>

                                </li>
                            </ul>
                        </div>
                        <div class="col-md-3 col-sm-3">
                            <h5>newsletter</h5>
                            <p>
                                Subscribe to our newsletter for latest updates 
                                about our creative agency
                            </p>
                            <div class="form-group has-feedback">
                                <input type="email" class="form-control " placeholder="Email address ...">
                                <i class="icon icon-Mail form-control-feedback"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="copyright-section">
                <p>Copyright &copy; 2017.Company name All rights reserved.</p>
            </section>
        </footer>



        <!-- Scripts -->

        <!-- components -->
        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script src="vendor/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
        <script src="vendor/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="vendor/owl-carousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
        <script src="vendor/waypoints/lib/jquery.waypoints.min.js" type="text/javascript"></script>
        <script src="vendor/slider-pro/dist/js/jquery.sliderPro.min.js" type="text/javascript"></script>
        <script src="vendor/slick-carousel/slick/slick.min.js" type="text/javascript"></script>
        <script src="vendor/jquery.mb.ytplayer/dist/jquery.mb.YTPlayer.min.js" type="text/javascript"></script>
        <script src="vendor/wow/dist/wow.min.js" type="text/javascript"></script>
        <script src="vendor/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
        <script src="js/modernizr.js" type="text/javascript"></script>

        <!-- custom scripts -->
        <script src="js/contact.js" type="text/javascript"></script>
        <script src="js/custom.js" type="text/javascript"></script>
        <!--<script src="js/map.js" type="text/javascript"></script>-->

    </body>
</html>

